<template>
  <div class="container">
    <el-dialog
    @close="closeDialogs"
    @open="opend"
      title="新增目录"
      :visible="isShow"
      width="400px"
      >
      <div slot="title" style="color:#fff">
          <span v-if="editData" class="title">修改目录</span>
          <span v-else class="title">新增目录</span>
      </div>
      <el-form :model="form" label-width="85px" :rules="rules" ref="ruleForm">
        <el-form-item label="所属学科" prop="subjectName" v-if="!subjectID">
          <el-select v-model="form.subjectID" placeholder="请选择">
            <el-option
              v-for="item in simpleList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input v-model="form.directoryName" placeholder="请输入目录名称" class="form-input"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="closeDialogs">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { add, detail, update } from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects'
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    getTableList: {
      type: Function,
      default: null
    },
    editData: {
      type: null
    },
    subjectID: {
      type: null
    }
  },
  data () {
    return {
      value: '',
      form: {
        directoryName: '',
        subjectID: null
      },
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      simpleList: [] // 学科分类列表数据
    }
  },
  created () {
    if (this.$route.query.id) {
      this.form.subjectID = this.subjectID
    }
    console.log(this.form.subjectID)
  },
  methods: {
    opend () {
      // 学科分类数据方法
      this.getSimple()
      if (this.editData) {
        this.getBackFill()
        console.log('数据回填接口详情')
      }
    },
    // 学科分类接口
    async getSimple () {
      const { data } = await simple()
      console.log(this.simpleList)
      this.simpleList = data
    },
    // 关闭弹窗
    closeDialogs () {
      this.$emit('closeDialog')
      // 相当于直接修改了父组件中的数据
      // 由于传下来的是对象类型 form又作为表单组件的数据传入 执行reset方法的时候会进行数据初始化相当于直接修改了父组件传下来的数据
      // （表单组件会把第一次传入的数据作为默认数据  在进行reset方法调用的时候会把form中的数据初始化成默认数据）
      // 直接传递简单类型数据 id  id调用接口然后渲染
      this.$refs.ruleForm.resetFields()
      this.form = {}
    },

    // 新增确定
    submit () {
      this.$refs.ruleForm.validate(async valida => {
        if (valida) {
          if (this.editData) {
            // 修改按钮
            // 逻辑代码
            await update({ ...this.form, id: this.editData })
            this.$message.success('修改成功')
          } else {
            // 新增按钮
            // 逻辑代码
            await add(this.form)
            this.$message.success('添加成功')
          }
          if (this.$route.query.id) {
            this.getTableList({ page: 1, pagesize: 10, subjectID: this.form.subjectID })
          } else {
            this.getTableList({ page: 1, pagesize: 10 })
          }
          // this.getTableList({ page: 1, pagesize: 10, subjectID: this.form.subjectID })
          this.closeDialogs()
        }
      })
    },
    // 数据回填 修改
    async getBackFill () {
      const res = await detail({ id: this.editData })
      this.form = res.data
    }
  }
}
</script>

<style scoped lang='scss'>
 ::v-deep .el-input__inner{
  // display: inline-block;
  width: 280px;

}
::v-deep .el-dialog__footer {
  text-align: center;
}
::v-deep .el-dialog__body {
  width: 400px;
}
// ::v-deep .el-input{
//   display: inline-block;
//   width: 217px;

// }
// ::v-deep .el-input--medium {
//   width: 217px;

// }
</style>
